<template>
  <yd-layout class="m-member-pay">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="支付" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-member-pay-time">
      <div>
        购买年限<button @click="selectTimeShow = true">{{payTime}}</button>年
      </div>
      <p>年费&nbsp&nbsp<em>{{payPrice}}元/年</em></p>
    </div>

    <yd-cell-group title="选择支付方式" class="m-member-pay-type">
      <yd-cell-item type="radio">
        <span slot="left"><img src="../../assets/icon_alipay.png" />支付宝支付<em>推荐</em></span>
        <input slot="right" type="radio" value="h5_alipay" v-model="payType"/>
      </yd-cell-item>
      <yd-cell-item type="radio">
        <span slot="left"><img src="../../assets/icon_wechat.png" />微信支付</span>
        <input slot="right" type="radio" value="h5_wxpay" v-model="payType"/>
      </yd-cell-item>
      <!-- <yd-cell-item type="radio">
        <span slot="left"><img src="../../assets/icon_zhongjin.png" />中金支付</span>
        <input slot="right" type="radio" value="3" v-model="payType"/>
      </yd-cell-item> -->
    </yd-cell-group>

    <yd-button-group>
      <yd-button size="large" type="primary" @click.native="onToPay">确认支付</yd-button>
    </yd-button-group>

    <div v-html="submitFormHtml"></div>
    <yd-actionsheet :items="payList" v-model="selectTimeShow" v-if="payList.length"></yd-actionsheet>
  </yd-layout>
</template>

<script>
  import { apiMemberPayFee, apiMemberPay } from 'js/api'

  export default {
    data() {
      return {
        payId: '', // 订单id
        payTimeId: '', // 会员费用id
        type: '', // 申请会员类型
        payStatus: '', // 支付状态,第一次支付传pay，续费不需要传
        payTime: '1',
        payPrice: '0',
        selectTimeShow: false,
        payType: 'h5_alipay',
        payList: [],
        submitFormHtml: '' // 表单提交form
      }
    },
    created() {
      this.type = this.$route.query.type
      this.payId = this.$route.query.id
      this.payStatus = this.$route.query.status || ''
      // 获取和处理申请会员费用列表
      apiMemberPayFee(this.$store.getters.token, this.type).then(data => {
        this.payList = data.list || []
        this.payTime = this.payList[0].year
        this.payPrice = this.payList[0].price
        this.payTimeId = this.payList[0].id
        this.payList.forEach((pay, index) => {
          this.payList[index].label = pay.title
          this.payList[index].callback = data => {
            this.payTime = data.year
            this.payPrice = data.price
            this.payTimeId = data.id
          }
        })
      })
    },
    methods: {
      onToPay() {
        // console.log(this.$store.getters.token, this.payId, this.payTimeId, this.payStatus, this.payType)
        apiMemberPay(this.$store.getters.token, this.payId, this.payTimeId, this.payStatus, this.payType).then(data => {
          if (this.payType == 'h5_alipay') { // 支付宝支付
            this.submitFormHtml = (data || {}).orderString || ''
            this.$toast('正在提交支付...', () => {
              document.getElementsByTagName('form')[0].submit()
            })
          } else { // 微信支付
            this.$toast('暂时不支持微信支付，请选择支付宝支付', () => {
              this.payType = 'h5_alipay'
            }) 
            // const codeUrl = (data || {}).code_url || ''
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-member-pay-time {
    padding: .4rem 0;
    background: #fff;
    text-align: center;
    color: #999;
    button {
      padding: .06rem .26rem;
      margin: 0 .2rem;
      border: 1px solid #ddd;
      font-size: .32rem;
    }
    p {
      margin-top: .6rem;
    }
    em {
      color: #f00385;
    }
  }
  .m-member-pay-type {
    margin-top: .4rem;
    background: #fff;
    .yd-cell-title {
      border-bottom: 0;
    }
    img {
      display: inline-block;
      width: .5rem;
      height: .5rem;
      vertical-align: middle;
      margin-right: .2rem;
    }
    em {
      padding: .1rem .1rem .05rem .1rem;
      font-size: .2rem;
      background: #ff7d00;
      color: #fff;
      border-radius: 3px;
      margin-left: .1rem;
    }
  }
</style>